<template>
  <div class="login-container flx-center">
    <div class="login-box">
      <div class="config">
        <Language class="language" />
        <SwitchDark class="dark" />
      </div>
      <div class="login-left">
        <img class="login-left-img" src="@/assets/images/login_left.png" alt="login" />
      </div>
      <div class="login-form">
        <div class="login-logo">
          <img class="login-icon" :src="imageSrc" alt="" />
          <h2 class="ml-2">EasyWork</h2>
        </div>
        <LoginForm />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="login">
import LoginForm from "./components/LoginForm.vue";
import SwitchDark from "@/components/SwitchDark/index.vue";
import Language from "@/layouts/components/Header/components/Language.vue";
import { onMounted } from "vue";
import { ref } from "vue";
const imageSrc = ref<string>("");

onMounted(async () => {
  const module1 = await import("@/assets/head/1.jpg");
  const module2 = await import("@/assets/head/2.jpg");
  const module3 = await import("@/assets/head/3.jpg");
  const module4 = await import("@/assets/head/4.jpg");
  const module5 = await import("@/assets/head/5.jpg");
  const module6 = await import("@/assets/head/6.jpg");
  const module7 = await import("@/assets/head/7.jpg");
  const module8 = await import("@/assets/head/8.jpg");
  const module9 = await import("@/assets/head/9.jpg");
  const images = [
    module1.default,
    module2.default,
    module3.default,
    module4.default,
    module5.default,
    module6.default,
    module7.default,
    module8.default,
    module9.default
  ];
  imageSrc.value = images[Math.floor(Math.random() * 9)];
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
